<template>
  <div :class="{ vertical: isVertical }">
    <el-form
      :model="workForm"
      :rules="newRules"
      ref="ruleForm"
      label-width="120px"
      class="demo-ruleForm"
    >
      <template v-for="(item, index) in formList">
        <el-form-item
          :label="getLable(index, item.field_name)"
          :prop="item.field_key"
          :key="index"
          :class="{ 'small-item': isEnable }"
        >
          <form-element
            :type_id="item.field_type_id"
            :placeholder="item.description"
            :field_choice="item.field_choice"
            v-model="workForm[item.field_key]"
            :isEnable="isEnable"
          ></form-element>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button v-if="!isEnable" type="primary" @click="submit"
          >{{ btn.transition_name }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import api from "@/api/index";
import FormElement from "./formElement";

export default {
  components: { FormElement },
  props: {
    direction: {
      type: String,
      default: "horizontal" //vertical
    },
    newType: {
      type: Number,
      default: null
    },
    fieldList: {
      type: Array,
      defaut: function() {
        return [];
      }
    }
  },
  data() {
    return {
      input: "",
      workForm: {},
      rules: {},
      formList: [],
      btn: {},
      id: ""
    };
  },
  created() {
    if (this.newType) {
      this.getFormList();
    } else {
      this.showForm(this.formList);
    }
  },
  computed: {
    isVertical() {
      return this.direction == "vertical";
    },
    isEnable() {
      return !this.newType;
    },
    newRules() {
      return this.newType ? this.rules : {};
    }
  },
  watch: {
    fieldList(val) {
      this.showForm(val);
    }
  },
  methods: {
    getLable(index, text) {
      if (this.isVertical) {
        return `${index + 1}、${text}`;
      } else {
        return text;
      }
    },
    showForm(val) {
      this.formList = val;
      this.getRules();
      this.getDefaultValue();
    },
    resetForm() {
      this.$refs["ruleForm"].resetFields();
    },
    getDefaultValue() {
      this.formList.forEach(item => {
        this.workForm[item.field_key] = item.field_value;
      });
    },
    getRules() {
      let data = {};

      this.formList.forEach(item => {
        if (item.field_attribute == 3) return; //3为非必填
        if (
          item.field_type_id === 5 ||
          item.field_type_id === 55 ||
          item.field_type_id === 58
        ) {
          data = [
            {
              required: true,
              message: `请填写${item.field_name}`,
              trigger: "blur"
            }
          ];
        } else if (item.field_type_id === 10 || item.field_type_id === 15) {
          data = [
            { required: true, message: `${item.field_name}不能为空` },
            { type: "number", message: `${item.field_name}必须为数字值` }
          ];
        } else if (
          item.field_type_id === 20 ||
          item.field_type_id === 35 ||
          item.field_type_id === 45 ||
          item.field_type_id === 50 ||
          item.field_type_id === 60 ||
          item.field_type_id === 70
        ) {
          data = [
            {
              required: true,
              message: `请选择${item.field_name}`,
              trigger: "change"
            }
          ];
        } else if (
          item.field_type_id === 25 ||
          item.field_type_id === 30 ||
          item.field_type_id === 80
        ) {
          data = [
            {
              type: "string",
              required: true,
              message: `请选择${item.field_name}`,
              trigger: "change"
            }
          ];
        }
        this.rules[item.field_key] = data;
      });
    },
    getFormList() {
      api.getWONewForm(this.newType).then(res => {
          this.id = res.data.id;
          if (res.data.transition && res.data.transition.length > 0) {
            this.btn = res.data.transition[0];
          }
          this.formList = res.data.field_list;
          this.getRules();
          this.workForm = {};
          this.workForm.workflow_id = res.data.workflow_id;
          this.workForm.transition_id =
            res.data.transition[0].transition_id;
      });
    },
    // 提交
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.btn.alert_enable) {
            let title = "确认操作？";
            if (this.btn.alert_text) title = this.btn.alert_text;
            this.$confirm(title, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              this.submitWorkOrder();
            });
          } else {
            this.submitWorkOrder();
          }
        } else {
          //console.log("error submit!!");
          return false;
        }
      });
    },
    submitWorkOrder() {
      api.submitWorkOrder(this.workForm).then(res => {
        this.msgSuccess("新建成功!");
        this.$emit("toClose");
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.desc {
  min-height: 14px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 14px;
  transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  padding-top: 0;
}

.small-item {
  margin-bottom: 8px;
}

.demo-ruleForm {
  margin-top: 5px;
  width: 80%;
}

.vertical {
  ::v-deep.el-form {
    width: calc(100%);
    .el-form-item__label {
      width: 100% !important;
      text-align: left;
    }
    .el-form-item__content {
      margin-left: 0px !important;
    }
  }
}
</style>
